<template>
  <custom-page>
    <view>
      <!-- <u-image src="/static/renlian.jpg"
         width="100%" height="400px"
       style="padding: 50rpx;"
      >

      </u-image>
      <view style="padding: 0 40rpx;margin-top: 40rpx;">
        <u-button type="success" size="large">人脸拍照</u-button>
      </view> -->

      <view style="padding: 0 40rpx;background-color: #FFFFFF;">
        <u--form
            labelPosition="left"
            ref="form1"
			:model="list"
			:rules="rules"
        >
          <u-form-item
              labelAlign="center"
              label="申请人"
              prop="data.real_name"
              :borderBottom="false"
              borderBottom
              ref="item1"
              labelWidth="200"
              :labelStyle="{'font-size':'50rpx'}"
          >
            <u--input
                placeholder="请输入姓名"
                border="none"
                width="300"
				v-model="list.data.real_name"
				disabledColor="#ffffff"
				disabled
            ></u--input>
          </u-form-item>
          <u-form-item
              labelAlign="center"
              label="单位"
              prop="data.word_unit"
              borderBottom
              ref="item1"
              labelWidth="200"

          >
            <u--input
                placeholder="请输入单位"
                border="none"
                width="300"
				v-model="list.data.word_unit"
				disabledColor="#ffffff"
				disabled
            ></u--input>
          </u-form-item>
		  <u-form-item
		       labelAlign="center"
		       label="是否合租"
		       prop="data.alone"
		       borderBottom
		       ref="item1"
		       labelWidth="200"
		   
		   >
		   <u-radio-group v-model="value" @change="radioGroupChange">
		   			<u-radio 
		   				@change="radioChange" 
		   				v-for="(item, index) in radioList" :key="index" 
		   				:name="item.id"
		  						:label="item.name"
		   				:disabled="item.disabled"
		  						size="40"
		  						labelSize="25"
		  						class="radioClass"
		   			>
		   				
		   			</u-radio>
		   		</u-radio-group>
		   <!-- <radio-group @change="chan">
		  			  <label>
		  				  <radio  :value="'0'"  checked="checked" />确认
		  				  <radio :value="'1'"  />拒绝
		  			  </label>
		   </radio-group> -->
		  		</u-form-item>
          <u-form-item
              labelAlign="center"
              label="理由"
              prop="data.mark"
              borderBottom
              ref="item1"
              labelWidth="200"
          >
            <u--textarea height="100rpx" placeholder="请填写理由" confirm-type="send" v-model="list.data.mark"></u--textarea>
          </u-form-item>
        </u--form>
	
      </view>
      <view style="padding: 0 40rpx;margin-top: 40rpx;">
        <u-button type="primary" size="large" @click="apply">申请</u-button>
      </view>
	  <view class="applyStyle">申请记录</view>
	  <view class="frame_bottom">
	  	<view class="frame_block" v-for="(item,index) in recordList" :key="index">
			<view style="margin-left: 10px;display: flex; width: 50%;" class="fontStyle">
			<view style="flex:1;" v-if="item.room == null">{{item.user.real_name}}</view>
			<view style="flex:1;" v-else>{{item.room.building.name + item.room.building.building_number + item.room.name}}</view>
			<!-- <span style="margin-right: 10px;">{{item.status ==0 ? '待审核':'已分配'}}</span>
			 -->
			 <u-tag text="待审核"  size="mini" type="warning" v-if="item.status == 0" shape="circle" ></u-tag>
			 <u-tag text="已分配"  size="mini" type="success" v-if="item.status == 1" shape="circle" ></u-tag>
			 <u-tag text="已退房"  size="mini" type="error" v-if="item.status == 2" shape="circle" ></u-tag>
			  <u-tag text="已驳回"  size="mini" v-if="item.status == 3" shape="circle" ></u-tag>
			</view>
			<view  style="font-size: 12px;margin-right: 10px;">{{item.create_time}}</view>
		</view>
	  </view>
    </view>
  </custom-page>
</template>

<script>
	import Api from '@/util/api.js'
	export default {
		data() {
			return {
				userInfo:'',
				list:{
					data:{
						real_name:'',
						word_unit:'',
						alone:0,
						mark:''
					}
				},
				
				radioList: [
					{	id:0,
						name: '合租',
						disabled: false
					},
					{
						id:1,
						name: '独居',
						disabled: false
					},
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: 0,
				rules: {
					'data.real_name': {
						type: 'string',
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					},
					'data.word_unit': {
						type: 'string',
						required: true,
						message: '请填写工作单位',
						trigger: ['blur', 'change']
					},
					'data.alone': {
						type: 'number',
						max:1,
						required: true,
						message: '请选择是否合租',
						trigger: ['blur', 'change']
					},
					
				},
				recordList:[]
			};
		},
		onShow() {
			var that = this
			that.checkUser()
			that.getCkeckRecord()
			that.list.data.real_name = that.userInfo.real_name
			that.list.data.word_unit = that.userInfo.word_unit
		},
		methods: {
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				console.log(e);
				var that = this
				that.list.data.alone = e
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			},
			apply(){
				var that = this
				var data = that.list.data
				var userInfo = that.userInfo
				this.$refs.form1.validate().then(res => {
					console.log('data',data)
					data['user_id'] = userInfo.id
					Api.addCheckRecord(data).then(res=>{
						console.log('获取成功',res)
						if(res.msg == '获取成功'){
							// uni.$u.toast("申请成功，刷新中")
							uni.showToast({
								title: '申请成功，刷新中',
								duration: 1000,
								mask:true
							});
							setTimeout(function(){
								uni.redirectTo({
									url: '/pages/register/register'
								});
							},1000)
							
						}else{
							uni.$u.toast(res.msg)
						}
					})
					// uni.$u.toast('校验通过')
				}).catch(errors => {
					// uni.$u.toast('校验失败')
				})
			},
			checkUser(){
				var that  = this
				var userInfo = that.userInfo;
					if(localStorage.getItem('userInfo')){
						that.userInfo = JSON.parse(localStorage.getItem('userInfo'))
					}else{
						uni.showToast({
						    icon: 'none',   
						    duration: 3000,
						    title: "当前用户未登录"
						});
						return;
					}
				
				
			},
			
			getCkeckRecord(){
				var that = this
				var data = {
					user_id:that.userInfo.id
				}
				Api.getCheckRecord(data).then(res=>{
					console.log('获取成功',res)
					that.recordList = res.data
				})
			}
		}
	};
</script>

<style lang="scss">
	.radioClass{
		display: flex;
		margin-left: 20px;
	}
	.frame_bottom{
		display: flex;
		flex-direction: column;
		// height: 500rpx;
		// margin:0px 17px;
	}
	.frame_block{
		margin-top: 5px;
		width: 100%;
		padding:5px 0px;
		display: flex;
		background-color: white;
		justify-content: space-between;
		// border-radius: 10px;
		// height: 10px;
	}
	.applyStyle{
		margin:10px 5px;
	}
	.fontStyle{
		color: #000;
		font-size: 15px;
	}
	
</style>
